<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>后台管理模板</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">

    <script src="/js/jsa/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="/js/jsa/Area.js" type="text/javascript"></script>
    <script src="/js/jsa/AreaData_min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function (){
            initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '44', '0', '0');
        });

        //得到地区码
        function getAreaID(){
            var area = 0;
            if($("#seachdistrict").val() != "0"){
                area = $("#seachdistrict").val();
            }else if ($("#seachcity").val() != "0"){
                area = $("#seachcity").val();
            }else{
                area = $("#seachprov").val();
            }
            return area;
        }

        function showAreaID() {
            //地区码
            var areaID = getAreaID();
            //地区名
            var areaName = getAreaNamebyID(areaID) ;
            $('#diqu').val(areaName)
        }

        //根据地区码查询地区名
        function getAreaNamebyID(areaID){
            var areaName = "";
            if(areaID.length == 2){
                areaName = area_array[areaID];
            }else if(areaID.length == 4){
                var index1 = areaID.substring(0, 2);
                areaName = area_array[index1] + " " + sub_array[index1][areaID];
            }else if(areaID.length == 6){
                var index1 = areaID.substring(0, 2);
                var index2 = areaID.substring(0, 4);
                areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID];
            }
            return areaName;
        }
    </script>
</head>

<body class="fixed-sidebar full-height-layout gray-bg fixed-nav" style="overflow:hidden">
<div id="wrapper">
    <!--左侧导航开始-->
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="nav-close"><i class="fa fa-times-circle"></i>
        </div>
        <div class="sidebar-collapse">
            <ul class="nav" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <span><img alt="image" th:src="@{/img/school.png}" width="100px" height="100px" /></span>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear">
                               <span class="block m-t-xs"><strong class="font-bold"></strong></span>
                                <span class="text-muted text-xs block">管理员<b class="caret"></b></span>
                                </span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li><a class="J_menuItem" href="">修改密码</a></li>
                            <li><a th:href="@{/logout}">安全退出</a></li>
                        </ul>
                    </div>
                    <div class="logo-element">MVC
                    </div>
                </li>
                <li>
                    <a href="/tindex">
                        <i class="fa fa fa-bar-chart-o"></i>
                        <span class="nav-label">首页</span>
                        <span class="fa arrow"></span>
                    </a>
                </li>
                <li>
                    <a href="/allUser">
                        <i class="fa fa fa-bar-chart-o"></i>
                        <span class="nav-label">所有用户列表</span>
                        <span class="fa arrow"></span>
                    </a>
                </li>
                <li>
                    <a href="/punch_in_record">
                        <i class="fa fa fa-bar-chart-o"></i>
                        <span class="nav-label">打卡记录查询</span>
                        <span class="fa arrow"></span>
                    </a>
                </li>
                <li>
                    <a href="/multiple_conditions">
                        <i class="fa fa fa-bar-chart-o"></i>
                        <span class="nav-label">用户多条件查询</span>
                        <span class="fa arrow"></span>
                    </a>
                </li>
                <li class="active">
                    <a href="/high_risk">
                        <i class="fa fa fa-bar-chart-o"></i>
                        <span class="nav-label">高危地区管理</span>
                        <span class="fa arrow"></span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <!--左侧导航结束-->
    <!--右侧部分开始-->
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="row border-bottom">
            <nav class="navbar navbar-fixed-top" role="navigation" style="margin-bottom: 0 ;background:#345f73">
                <div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
                    <form role="search" class="navbar-form-custom" method="post" action="search_results.html">
                        <div class="form-group">
                            <input type="text" style=" color:#FFF; font-size:20px" value="后台管理系统" class="form-control" disabled="disabled" name="top-search" id="top-search">

                        </div>
                    </form>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li class="dropdown hidden-xs">
                        <a  th:href="@{/logout}" class="right-sidebar-toggle" aria-expanded="false">
                            <i class="fa fa fa-sign-out"></i>安全退出
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="row content-tabs" style="display: flex;  justify-content:space-between">
            <a href="/high_risk?excel=true">导出</a>
            <button type="button" data-toggle="modal" data-target="#myModal">添加</button>
            <a href="#" class="roll-nav roll-right J_tabExit" id="alarm-fullscreen-toggler"><i class="fa fa-arrows-alt"></i> 全屏</a>
        </div>
        <div class="row J_mainContent" id="content-main">

            <table class="table table-striped">
                <thead>
                    <th>ID</th>
                    <th>城市/地址</th>
                    <th>危险等级</th>
                    <th>删除</th>
                </thead>
                <tbody>
                <tr th:each="ls:${list}">
                    <td th:text="${ls.getRegionId()}"></td>
                    <td th:text="${ls.getDangerRegion()}"></td>
                    <td th:text="${ls.getDangerLevel()}"></td>
                    <td><a th:href="@{/deleteDangerRegion(id=${ls.getRegionId()})}" onclick="javascript:return del()">删除</a></td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="container">
            <!-- 模态框 -->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">增加高危地区</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <!-- 模态框主体 -->
                        <div class="modal-body">
                            <form action="/addDangerRegion" method="post">
                                地区：<input id="diqu" type="text" name="dangerRegion" required onfocus="this.blur()"><br>
                                <select id="seachprov" name="seachprov" onChange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');"></select>&nbsp;&nbsp;
                                <select id="seachcity" name="homecity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');"></select>&nbsp;&nbsp;
                                <span id="seachdistrict_div"><select id="seachdistrict" name="seachdistrict"></select></span>
                                <input type="button"  value="获取地区" onClick="showAreaID()"/><br>
                                危险等级：
                                <input type="text" list="danger_list" name="dangerLevel" required/>
                                <datalist id="danger_list">
                                    <option th:value="1">低风险</option>
                                    <option th:value="2">中风险</option>
                                    <option th:value="3">高风险</option>
                                </datalist>

                                <br>
                                <input type="submit" th:value="提交">
                           </form>
                        </div>

                        <!-- 模态框底部 -->
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>


                    </div>
                </div>
            </div>

        </div>


        <div class="footer">
            <div class="pull-right">&copy; 2021 <a href="#" target="_blank">东莞理工学院</a>
            </div>
        </div>
    </div>
</div>
<SCRIPT LANGUAGE=javascript>
    function del() {
        var msg = "您真的确定要删除吗？\n\n请确认！";
        if (confirm(msg)==true){
            return true;
        }else{
            return false;
        }
    }
</SCRIPT>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/quanping.js"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="js/hplus.js?v=4.1.0"></script>
<script type="text/javascript" src="js/contabs.js"></script>

<!-- 第三方插件 -->
<script src="js/plugins/pace/pace.min.js"></script>

</body>

</html>
